<template>
  <el-descriptions direction="vertical" :column="2">
    <el-descriptions-item label=" 题目工种" :style="{
      'grid-column': `2`,
    }">
      <el-select v-model="question.jobType" placeholder="请选择">
        <el-option label="工种1" value="job1"></el-option>
        <el-option label="工种2" value="job2"></el-option>
      </el-select>
    </el-descriptions-item>

    <el-descriptions-item label="题目类型">
      <el-select v-model="question.questionType" placeholder="请选择">
        <el-option label="选择题" value="choice"></el-option>
        <el-option label="填空题" value="fill"></el-option>
      </el-select>
    </el-descriptions-item>

    <el-descriptions-item label="标签">
      <el-tag v-for="tag in question.tags" :key="tag">
        {{ tag }}
      </el-tag>
    </el-descriptions-item>

    <el-descriptions-item label="归属题库">
      <el-select v-model="question.questionBank" placeholder="请选择">
        <el-option label="题库1" value="bank1"></el-option>
        <el-option label="题库2" value="bank2"></el-option>
      </el-select>
    </el-descriptions-item>

    <el-descriptions-item label="题目内容">
      <el-input type="textarea" v-model="question.content" rows="4"></el-input>
    </el-descriptions-item>

    <el-descriptions-item label="题目图片">
      <el-upload :on-success="handleImageUploadSuccess" accept="image/*" list-type="picture-card" :auto-upload="false">
        <el-button type="primary">点击上传</el-button>
      </el-upload>
    </el-descriptions-item>

    <!-- <el-descriptions-item label="选项列表">
      <el-table :data="question.options" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column type="selection" width="100">
          <template #default="scope">
            <el-checkbox v-model=scope.row.isAnswer></el-checkbox>
          </template>
</el-table-column>
<el-table-column label="选项图片" width="150">
  <template #default="scope">
            <el-upload :on-success="(file: File) => handleOptionImageUploadSuccess(scope.row, file)" accept="image/*"
              list-type="picture-card" :auto-upload="false">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </template>
</el-table-column>
<el-table-column label="答案内容">
  <template #default="scope">
            <el-input v-model=scope.row.answerContent type="textarea"></el-input>
          </template>
</el-table-column>
<el-table-column label="答案解析">
  <template #default="scope">
            <el-input v-model=scope.row.answerExplanation type="textarea"></el-input>
          </template>
</el-table-column>
<el-table-column label="操作" width="100">
  <template #default="scope">
            <el-button @click="removeOption(scope.row)" type="danger">删除</el-button>
          </template>
</el-table-column>
</el-table>
<el-button type="primary" @click="addOption">+ 增加选项</el-button>
</el-descriptions-item> -->
  </el-descriptions>
</template>

<script lang="tsx" setup>
import { ref } from 'vue';
import type { ElUpload, ElTable, ElTableColumn, ElSelect, ElTag, ElInput, ElButton, ElCheckbox } from 'element-plus';

interface QuestionOption {
  isAnswer: boolean;
  image: string | null;
  answerContent: string;
  answerExplanation: string;
}

interface Question {
  jobType: string;
  questionType: string;
  tags: string[];
  questionBank: string;
  content: string;
  image: string | null;
  options: QuestionOption[];
}

// const question = defineProps<{ question: Question }>();
const question = ref<Question>({
  jobType: '',
  questionType: '',
  tags: [],
  questionBank: '',
  content: '',
  image: null,
  options: [],
});

const handleImageUploadSuccess = (file: File) => {
  question.value.image = URL.createObjectURL(file);
};

const handleOptionImageUploadSuccess = (option: QuestionOption, file: File) => {
  option.image = URL.createObjectURL(file);
};

const removeTag = (tag: string) => {
  question.value.tags = question.value.tags.filter(t => t !== tag);
};

const removeOption = (option: QuestionOption) => {
  question.value.options = question.value.options.filter(o => o !== option);
};

const addOption = () => {
  question.value.options.push({
    isAnswer: false,
    image: null,
    answerContent: '',
    answerExplanation: ''
  });
};
</script>

<style scoped>
/* .uploaded-image {
  width: 100%;
  height: auto;
} */
/* .el-descriptions__table {
  table-layout: fixed;
}

.el-descriptions__cell.el-descriptions__content.is-vertical-content {
  height: 36px;
} */
</style>
